<script lang="ts" setup>
import "@/assets/styles/book.css";
import {reactive, toRefs, onMounted} from "vue";
import {useRouter, useRoute} from "vue-router";
import {getBookById, listChapters} from "@/api/book";
import type {Book, ChapterInfo} from "@/type/book";

const route = useRoute();
const router = useRouter();

const state = reactive({
  book: {} as Book,
  chapterList: [] as ChapterInfo[],
  imgBaseUrl: import.meta.env.VITE_APP_BASE_IMG_URL,
});
const {book, chapterList, imgBaseUrl} = toRefs(state);
onMounted(() => {
  const bookId = route.params.bookId;
  loadBook(bookId);
  loadChapterList(bookId);
});

const loadBook = async (bookId: any) => {
  const {data} = await getBookById(bookId);
  state.book = data;
};

const loadChapterList = async (bookId: any) => {
  const {data} = await listChapters({bookId: bookId});
  state.chapterList = data;
};

const bookContent = (bookId: any, chapterId: any) => {
  router.push({path: `/book/${bookId}/${chapterId}`});
};

const bookDetail = (bookId: any) => {
  router.push({path: `/book/${bookId}`});
};

</script>

<template>
  <div class="main">
    <div class="top">
      <div class="book-title">
        <span>{{ book.bookName }}</span>
      </div>
      <div class="book-info">
        <div>作者：<span>{{ book.authorName }}</span></div>
        <div>类别：<span>{{ book.categoryName }}</span></div>
        <div>状态：<span>{{ book.bookStatus == 0 ? "连载中" : "已完结" }}</span></div>
        <div>总点击：<span>{{ book.visitCount }}</span></div>
        <div>总字数：<span>{{ book.wordCount }}</span></div>
      </div>
    </div>
    <div class="bottom">
      <div class="chapter-nav">
        <span>正文({{ chapterList.length }})</span>
      </div>
      <div class="chapter-list">
        <div v-for="(item,index) in chapterList" :key="index" class="chapter-item"
             @click="bookContent(book.id,item.id)">
          <span>{{ item.chapterName }}</span><i class="red"> [{{ item.isVip == 1 ? '收费' : '免费' }}]</i>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  box-sizing: border-box;
  background-color: #F5F5F5;

  .top {
    width: 60%;
    background-color: #fff;
    margin: 0 auto;

    .book-title {
      text-align: center;

      span {
        font-size: 30px;
      }
    }

    .book-info {
      display: flex;
      gap: 30px;
      justify-content: center;
      padding: 30px;

      div {
        color: #9B9B9B;

        span {
          color: black;
        }
      }
    }

  }

  .bottom {
    width: 60%;
    background-color: #fff;
    margin: 0 auto;

    .chapter-nav {
      margin: 0 auto;
      width: 90%;
      background-color: #F9F9F9;
      padding: 10px 8px;
    }

    .chapter-list {
      margin: 0 auto;
      width: 90%;
      padding: 10px 8px;
      display: flex;
      flex-wrap: wrap;
      //justify-content: space-between;
      .chapter-item {
        width: calc((100% - 10px) / 3);
        border-bottom: 1px dotted #ddd;
        line-height: 40px;

        .red {
          color: #fc7403;
          font-style: normal;
        }

        &:hover {
          cursor: pointer;
          color: #fc7403;
        }
      }
    }
  }
}
</style>
